<!-- template inhertance -->
<extend name="layout/default"/>

<!-- styles -->
<block name="linkcss">
    <link rel="stylesheet" href="/Public/home/css/workInstruction/detail.css">
</block>

<!-- scripts -->
<block name="linkjs">
    <script src="/Public/home/js/workInstruction/detail.js"></script>
</block>

<!-- page title -->
<block name="webtitle">
    <title>任务详情</title>
</block>

<!-- navagations -->
<block name="breadcrumb">
    <ol class="breadcrumb breadcrumb-edit">
        <li><a href="workInstructionIndex.html">工作指示</a></li>
        <li class="active">任务详情</li>
    </ol>
</block>

<!-- main body -->
<block name="content">
   <div class="work-box row">
       <div class="col-md-10">

           <!-- 任务内容 -->
           <div class="panel panel-default">
               <div class="panel-body">
                   <h4>任务内容</h4>
                   <hr>
                   <p>
                       Layui 是一款采用自身模块规范编写的国产前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到API的每一处细节都经过精心雕琢
                   </p>
                   <hr>
                   <div class="pull-right">
                       <span class="text-muted mr-10">创建时间 2019-5-31 17:25:12</span>
                       <span class="text-muted">截止时间 2019-5-31 17:25:12</span>
                   </div>
               </div>
           </div>

           <!-- 当事人回复表单 -->
           <div class="panel panel-default">
               <div class="panel-body">
                   <form class="layui-form" action="">
                       <div class="layui-form-item">
                           <input type="checkbox" name="over" title="结束这项工作" lay-skin="primary">
                       </div>
                       <div class="layui-form-item">
                           <div class="layui-input-block" style="margin-left: 0;">
                               <textarea name="reply" class="layui-textarea" placeholder="在此输入回复或结束的描述..." lay-verify="required"></textarea>
                           </div>
                       </div>
                       <div class="layui-form-item">
                           <div class="layui-input-block" style="margin-left: 0;">
                               <button type="button" lay-submit="" lay-filter="reply" class="layui-btn">回复</button>
                           </div>
                       </div>
                   </form>
               </div>
           </div>

           <!-- 回复内容展示-->
           <!-- 张三完成情况-->
           <div class="panel panel-default" id="1">
               <div class="panel-body">
                   <h4><span>张三</span>的完成情况：</h4>

                   <!-- 回复聊天框-->
                   <div class="show-box">
                       <div class="reply-show">
                           <div class="show-left">
                               <div>
                                   <img src="/Public/home/img/face/face_01.png" width="50" height="50" class="img-circle" alt="face" title="">
                               </div>
                               <div class="mt-5">
                                   <a href="">名字</a>
                               </div>
                           </div>
                           <div class="show-body">
                               <div class="reply-content">
                                   <p>
                                       Layui 是一款采用自身模块规范编写的国产前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。
                                   </p>
                               </div>
                               <div class="reply-footer text-right text-muted">
                                   <span>2019-05-24 14:23:56</span>
                               </div>
                           </div>
                       </div>
                       <div class="reply-show">
                           <div class="show-left">
                               <div>
                                   <img src="/Public/home/img/face/face_04.png" width="50" height="50" class="img-circle" alt="face" title="">
                               </div>
                               <div class="mt-5">
                                   <a href="">名字</a>
                               </div>
                           </div>
                           <div class="show-body">
                               <div class="reply-content">
                                   <p>
                                       Layui 是一款采用自身模块规范编写的国产前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈
                                   </p>
                               </div>
                               <div class="reply-footer text-right text-muted">
                                   <span>2019-05-24 14:23:56</span>
                               </div>
                           </div>
                       </div>
                   </div>

                   <!-- 回复操作按钮 -->
                   <div class="mt-10 text-right">
                       <a href="" class="layui-btn layui-btn-small action" data-action="reply">回复</a>
                   </div>
               </div>
           </div>

           <!-- 李四完成情况-->
           <div class="panel panel-default" id="2">
               <div class="panel-body">
                   <h4><span>李四</span>的完成情况：</h4>

                   <!-- 回复聊天框-->
                   <div class="show-box">
                       <div class="reply-show">
                           <div class="show-left">
                               <div>
                                   <img src="/Public/home/img/face/face_01.png" width="50" height="50" class="img-circle" alt="face" title="">
                               </div>
                               <div class="mt-5">
                                   <a href="">名字</a>
                               </div>
                           </div>
                           <div class="show-body">
                               <div class="reply-content">
                                   <p>
                                       Layui 是一款采用自身模块规范编写的国产前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。
                                   </p>
                               </div>
                               <div class="reply-footer text-right text-muted">
                                   <span>2019-05-24 14:23:56</span>
                               </div>
                           </div>
                       </div>
                       <div class="reply-show">
                           <div class="show-left">
                               <div>
                                   <img src="/Public/home/img/face/face_04.png" width="50" height="50" class="img-circle" alt="face" title="">
                               </div>
                               <div class="mt-5">
                                   <a href="">名字</a>
                               </div>
                           </div>
                           <div class="show-body">
                               <div class="reply-content">
                                   <p>
                                       Layui 是一款采用自身模块规范编写的国产前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈
                                   </p>
                               </div>
                               <div class="reply-footer text-right text-muted">
                                   <span>2019-05-24 14:23:56</span>
                               </div>
                           </div>
                       </div>
                   </div>

                   <!-- 回复操作按钮 -->
                   <div class="mt-10 text-right">
                       <a href="" class="layui-btn layui-btn-small action" data-action="reply">回复</a>
                   </div>
               </div>
           </div>
       </div>

       <!-- 固定栏 指派人员 -->
       <div class="work-fixed">
           <div class="panel panel-default">
               <div class="panel-title">
                   <h4>发布人员</h4>
               </div>
               <div class="panel-body">
                   <ul class="myUser">
                       <li data-id="123">
                           <img src="/Public/home/img/face/face_04.png" width="50" height="50" class="img-circle" alt="face" title="">
                           <span class="ml-5">名字</span>
                       </li>
                   </ul>
               </div>
           </div>
           <div class="panel panel-default">
               <div class="panel-title">
                   <h4>指派人员</h4>
               </div>
               <div class="panel-body">
                   <ul class="toUser">
                       <li data-id="1">
                           <img src="/Public/home/img/face/face_08.png" width="50" height="50" class="img-circle" alt="face" title="">
                           <span class="ml-5">张三</span>
                       </li>
                       <li data-id="2">
                           <img src="/Public/home/img/face/face_01.png" width="50" height="50" class="img-circle" alt="face" title="">
                           <span class="ml-5">李四</span>
                       </li>
                   </ul>
                   <br>
                   <small class="text-muted">(点击可查看其完成情况)</small>
               </div>
           </div>
          <div class="panel panel-default">
              <div class="panel-body">
                  <button type="button" class="layui-btn layui-btn-primary reply-foucs w-100">
                      <i class="icon-comment-alt"></i> 回复
                  </button>
              </div>
          </div>
       </div>
   </div>

    <!--回复表单弹窗-->
    <div class="alert-box p-10" style="display: none">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <input type="checkbox" name="over" title="结束这项工作" lay-skin="primary">
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left: 0;">
                    <textarea name="reply" class="layui-textarea" placeholder="在此输入回复或结束的描述..." lay-verify="required"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block text-right">
                    <button type="button" class="layui-btn layui-btn-small" lay-submit="" lay-filter="reply">确定</button>
                    <button class="layui-btn layui-btn-primary layui-btn-small action" data-action="cancel">取消</button>
                </div>
            </div>
        </form>
    </div>

    <!--返回顶部-->
    <ul id="fixed-bars" class="list-unstyled" style="right: 20px;">
        <li id="goTop" class="hidden" title="回到顶部">
            <i class="icon-arrow-up"></i>
        </li>
    </ul>

</block>